// import NoData from "../../../components/no-data";
import styles from "./index.module.less";
import { Button, Form, Input, message, Select, Upload } from "antd";
import { useForm } from "antd/es/form/Form";
import { UploadOutlined } from "@ant-design/icons";
import axios from "axios";
import { useEffect, useRef, useState } from "react";
import { ITagItem } from "./dto";

const DocumentAddPage = () => {
  const [docAddForm] = useForm<any>();
  const [uploadedFile, setUploadedFile] = useState<any>();
  const [tags, setTags] = useState<ITagItem[]>();

  const getDefaultTags = () => {
    axios
      .get("/documents/tags")
      .then(({ data: res }: { data: { data: ITagItem[] } }) => {
        if (res.data) {
          console.log(res);
          setTags(res.data);
          const selectTags: (string | number | undefined)[] = [];
          res.data.map((r) => r.isDefault && selectTags.push(r.tagName));
          docAddForm.setFieldValue("tags", selectTags);
        }
      });
  };

  const handleFormSubmit = () => {
    const formInfos = docAddForm.getFieldsValue();
    let formdata = new FormData();
    if (!uploadedFile) {
      return message.error("请上传文件");
    }
    formdata.append("docName", formInfos.docTitle);
    formdata.append("tags", formInfos.tags);
    formdata.append("file", uploadedFile.originFileObj);
    axios
      .post("/documents/", formdata, {
        headers: { "content-type": "multipart/form-data" },
      })
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          message.success("保存成功");
          docAddForm.resetFields();
          setUploadedFile(undefined);
          const selectTags: (string | number | undefined)[] = [];
          tags?.map((r) => r.isDefault && selectTags.push(r.tagName));
          docAddForm.setFieldValue("tags", selectTags);
        }
      });
    // axios.get("/documents").then((res) => {
    //   console.log(res);
    // });
    console.log(docAddForm.getFieldsValue());
  };

  useEffect(() => {
    getDefaultTags();
  }, []);
  return (
    <div className={styles.container}>
      {/* <NoData /> */}
      <div className={styles.left}>
        <div></div>
      </div>
      <div className={styles.right}>
        <div>
          <div>
            <span>Get Started</span>
            <span>创建你的文档</span>
          </div>
          <Form
            form={docAddForm}
            layout="vertical"
            onFinish={handleFormSubmit}
            style={{ minWidth: 300, maxWidth: 600 }}
          >
            <Form.Item
              name={"docTitle"}
              label="文档标题"
              rules={[{ required: true, message: "请输入标题" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item label="上传文档">
              <Upload
                name="file"
                maxCount={1}
                onChange={(info) => {
                  setUploadedFile(info.file);
                }}
              >
                <Button icon={<UploadOutlined />}>Click to Upload</Button>
              </Upload>
            </Form.Item>
            <Form.Item name="tags">
              <Select mode="tags" showArrow style={{ width: "100%" }}>
                {tags &&
                  tags.map((t, i) => {
                    return (
                      <Select.Option key={i} value={t.tagName}>
                        {t.tagName}
                      </Select.Option>
                    );
                  })}
              </Select>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default DocumentAddPage;
